<html lang="en">

<head>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
    <script src="/js/my.js"></script>
    <title>登录</title>
    <style>
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="center">
        <form id="loginForm">
            <table>
                <tr>
                    <td>用户名 </td>
                    <td><input id="user" name="user" type="text" size="25" autofocus/></td>
                </tr>
                <tr>
                    <td>密码 </td>
                    <td><input id="password" name="password" type="password" size="25" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><button type="submit">登录</button></td>
                </tr>
            </table>
        </form>
        <span id="msg" style="color:red;"></span>
    </div>
    <script>
        $(document).ready(function () {
            $('#loginForm').submit(function (event) {
                event.preventDefault(); // 禁掉 url 传 form 数据
                const form = document.querySelector("#loginForm");
                var formData = new FormData(form);
                var passowrd = formData.get("password");
                var digest = CryptoJS.MD5(passowrd);
                formData.set("password", digest);
                $.ajax({
                    url: "/login/submit",
                    data: formData,
                    method: 'post',
                    processData: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    success: function (result) {
                        window.sessionStorage.setItem("auth_token", result.token)
                        window.location.href="/blog/list/"+result.uid
                    }
                }).fail(function (result, result1, result2) {
                    $('#msg').html(result.responseJSON.msg);
                });
            });
        });
    </script>
</body>

</html>